<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>菜单信息编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-margin-3 layui-anim layui-anim-upbit" style="margin-top: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item layui-col-space20">

                    <input type="number" name="id" th:value="${menu.id}" hidden="hidden">

                    <div class="layui-col-md12">
                        <label class="layui-form-label">菜单名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" th:value="${menu.name}" autocomplete="off" class="layui-input" lay-verify="required|menuName">
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <label class="layui-form-label">菜单链接：</label>
                        <div class="layui-input-block">
                            <input type="text" name="url" th:value="${menu.url}" autocomplete="off" class="layui-input" lay-verify="required|menuUrl">
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <label class="layui-form-label">菜单图标：</label>
                        <div class="layui-input-block">
                            <input type="text" name="icon" th:value="${menu.icon}" autocomplete="off" class="layui-input" lay-verify="required" id="chooseIcon">
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <label class="layui-form-label">上级编号：</label>
                        <div class="layui-input-block">
                            <select name="parent" disabled>
                                <option th:value="${menu.parent}" th:text="${menu.parent}"></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <label class="layui-form-label">菜单级别：</label>
                        <div class="layui-input-block">
                            <select name="level" disabled>
                                <option th:value="${menu.level}" th:if="${menu.level==1}">一级菜单</option>
                                <option th:value="${menu.level}" th:if="${menu.level==2}">二级菜单</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <label class="layui-form-label">菜单状态：</label>
                        <div class="layui-input-block">
                            <select name="status">
                                <option value="1" th:selected="${menu.status==1}">可用</option>
                                <option value="2" th:selected="${menu.status==2}">停用</option>
                            </select>
                        </div>
                    </div>

                </div>

                <div class="layui-form-item layui-col-space20">
                    <div class="layui-col-md12" style="text-align: center;">
                        <button class="layui-btn" lay-submit lay-filter="toDo">更新菜单</button>
                        <button type="reset" class="layui-btn layui-btn-primary">恢复默认</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 禁止键盘输入
        $('#chooseIcon').keydown(function (event) {
            return false;
        });

        // 点击输入框弹出提示
        $('#chooseIcon').click(function () {
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0,
                scrollbar: false,
                content: '/toChooseIcon',
                success: function (layero, index, that) {
                    layer.full(index); // 最大化
                }
            });
        });

        const nxu = /^[\u4e00-\u9fa5]{2,8}$/;

        // 自定义验证规则
        form.verify({   // 验证出库数量是否小于等于原有库存数量
            menuName: function (value) {
                if (!nxu.test(value)) {
                    return '菜单名称限制为2-8个汉字';
                }
            },
            menuUrl: function (value) {
                if (value !== 'javascript:void(0);' && !value.startsWith('/')) {
                    return '菜单链接的格式有误';
                }
            }
        });

        // 提交事件
        form.on('submit(toDo)', function (data) {
            let field = data.field; // 获取表单字段值
            $.ajax({
                url: '/doSetMenuInfo',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(field),
                success: function (res) {
                    if (res) {
                        layer.msg('配置成功');
                        setTimeout(() => {
                            parent.location.reload();
                        }, 2000)
                    } else {
                        layer.msg('配置失败');
                    }
                },
                error: function () {
                    layer.msg('Ajax请求异常！', {icon: 0});
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>